<template>
	<view class="contener ">
		<view class="shorCarBox">
			<view class="imgBox">
				<u--image :showLoading="true"
					src="https://www.tdtye.com/files/vegetable_mall_file/default/shorCarLogo.png" width="100rpx"
					height="90rpx" shape="square" radius="10">
				</u--image>
			</view>
			<view class="rightBox">
				<view class="price">
					￥{{totalPrice}}
				</view>
				<view class="payBtn">
					<u-button text="去支付" type="warning" shape="circle" @click="goPay()"></u-button>
				</view>
			</view>
		</view>
		<skeleton :skeleton="skeleton" :loading="loading">
			<block>
				<view class="listBox">
					<view>
						<view class="contentListBox">
							<!-- 左侧 滚动-->
							<scroll-view class="menu-wrapper" scroll-y :scroll-top="left_scroll"
								scroll-with-animation="true">
								<view class="left-content">
									<view style="position: relative;" v-for="(item,index) in goods" :key="index"
										ref="menuList" @click="select(index)"
										:class="{'current': currentIndex == index}">
										<view class="menu-item">{{item.name}}</view>
										<text class="allcount"
											v-if="getAllCount>=item.count&&item.count>0">{{item.count}}</text>
									</view>
								</view>
							</scroll-view>
							<!-- 右侧滚动 -->
							<scroll-view class="foods-wrapper" scroll-y :scroll-top="foodSTop" @scroll="myscroll"
								:style="'height:'+windows_height+'px'" scroll-with-animation="true"
								@scrolltolower="reachBottom()">
								<view ref="foodsWrapper">
									<view style="display: flex;justify-content: space-around;margin-top: 20rpx;">
										<view style="text-align: center;" @click="sectionChange(0)">
											<view :class="check==0?'selected':''">
												<u--image :showLoading="true"
													src="https://www.tdtye.com/files/vegetable_mall_file/default/growLogo.png"
													width="40px" height="40px" shape="square" radius="10"></u--image>
											</view>
											<view style="margin-top: 5rpx;font-size: 23rpx;font-weight: 600;"
												:class="check==0?'selectedText':''">
												我要摘
											</view>
										</view>

										<view style="text-align: center;" @click="sectionChange(1)">
											<view :class="check==1?'selected':''">
												<u--image :showLoading="true"
													src="https://www.tdtye.com/files/vegetable_mall_file/default/pinkLogo.png"
													width="40px" height="40px" shape="square" radius="10">
												</u--image>
											</view>
											<view style="margin-top: 5rpx;font-size: 23rpx;font-weight: 600;"
												:class="check==1?'selectedText':''">
												我要种
											</view>

										</view>
										<view style="text-align: center;" @click="sectionChange(2)">
											<view :class="check==2?'selected':''">
												<u--image :showLoading="true"
													src="https://www.tdtye.com/files/vegetable_mall_file/default/plotLogo.png"
													width="40px" height="40px" shape="square" radius="10">
												</u--image>
											</view>
											<view style="margin-top: 5rpx;font-size: 23rpx;font-weight: 600;"
												:class="check==2?'selectedText':''">
												看看土地
											</view>
										</view>
										<view style="text-align: center;" @click="sectionChange(3)"
											v-if="$comm.checkNull(currentPlot.count)&&currentPlot.count!=0">
											<view :class="check==3?'selected':''">
												<u--image :showLoading="true"
													src="https://www.tdtye.com/files/vegetable_mall_file/qrCode/5018767444867650.png"
													width="40px" height="40px" shape="square" radius="10">
												</u--image>
											</view>
											<view style="margin-top: 5rpx;font-size: 23rpx;font-weight: 600;"
												:class="check==2?'selectedText':''">
												生成海报
											</view>
										</view>
									</view>
									<view
										style="margin-top: 20rpx;height: 70rpx;width: 100%;background-color: #fbfbfb;">
										<view
											style="font-size: 20rpx;line-height: 70rpx;color: #a5a5a5;font-weight: 100;display: flex;">
											<view style="padding: 0rpx 0rpx 0rpx 15rpx;">
												<text>联系商家</text>
											</view>
											<view style="margin-left: 10rpx;padding: 3px 15px 0px 0px;">
												<u-icon name="server-man" color="#4b4945" size="28" @click="goChat">
												</u-icon>
											</view>
										</view>
									</view>
									<view ref="foodList" class="foods" v-for="(item, i) in goods" :key="i">
										<view class="food-title">
											<view>
												<text>{{item.name}}</text>
											</view>
										</view>
										<view class="food" v-for="(food, index) in item.foods" :key="index">
											<image :src="food.avatar" mode="aspectFill"
												style="width: 75px;height: 75px;margin-top: 6px;"
												@tap="tzvegetablesDetails(food)">
											</image>
											<view class="food-info">
												<text class="line-clamp2"
													style="font-size: 25rpx;margin-top: 2px;">{{food.title}}</text>
												<text
													style="font-size: 22rpx;margin: 2px 0 4px;color: #999;">月售{{food.sale}}</text>
												<!-- 加减 -->
												<view class="food-btm">
													<text
														class="food-price">￥{{check==0?food.price:food.growPrice}}</text>
												</view>
												<view
													style="margin-left: auto;padding: 0rpx 60rpx;display: flex;z-index: 0;"
													v-if="food.carCount<=0||food.carCount==null">
													<view class="addCar" @click="changeVegetable(food,1)">
														<text>加入购物车</text>
													</view>
												</view>
												<view
													style="margin-left: auto;padding: 0rpx 20rpx;display: flex;z-index: 0;"
													v-if="food.carCount>0">
													<view class="changeBtn" @touchend="changeVegetable(food,-1)">
														<u--image
															src="https://www.tdtye.com/files/vegetable_mall_file/default/minus.png"
															width="46rpx" height="46rpx" :fade="false">
														</u--image>
													</view>
													<view style="width: 110rpx;display: flex;" v-if="check==0">
														<u--input placeholder="重量" border="bottom"
															v-model="food.carCount" type="digit" inputAlign="center"
															:disabledPadding="false" @blur="changeCount(food)"
															@input="minCount(food)">
														</u--input>
														</u--input>
														<text
															style="font-size: 15px;color: #080808;line-height: 49rpx;">斤</text>
													</view>
													<text slot="input" style="width: 30px;text-align: center;"
														class="input" v-if="check==1">{{food.carCount}}</text>
													<view class="changeBtn" @touchend="changeVegetable(food,1)">
														<u--image
															src="https://www.tdtye.com/files/vegetable_mall_file/default/add.png"
															width="46rpx" height="46rpx" :fade="false">
														</u--image>
													</view>
												</view>
											</view>
										</view>
									</view>
									<view style="height: 200rpx;">

									</view>
								</view>
								<uni-load-more :status="status" :icon-size="14" :content-text="contentText" />
							</scroll-view>
						</view>
					</view>
				</view>
			</block>
		</skeleton>
	</view>

</template>

<script>
	import dragBall from "../common/geek-cat-dragball/drag_ball.vue"
	import shopcart from '@/pageA/uni_modules/shopcart.vue';
	import cartcontrol from '@/components/cartcontrol.vue'
	import Vue from 'vue'
	import Skeleton from '@/components/ls-skeleton/ls-skeleton.nvue';
	export default {
		components: {
			shopcart,
			cartcontrol,
			Skeleton,
			dragBall
		},
		data() {
			return {
				currentPlot: "",
				btnDisabled: false,
				totalPrice: 0.00,
				value11: 0,
				check: 0,
				title: 'Hello',
				goods: [],
				ifBottomRefresh: false, //是否触底
				status: 'more',
				totalCount: 1,
				params: {
					pageNo: 1,
					pageSize: 10
				},
				contentText: {
					contentdown: '上拉加载更多~',
					contentrefresh: '加载中',
					contentnomore: '暂无更多~'
				},
				windows_height: 0, //屏幕高度
				foodSTop: 0, //右侧的滑动值
				currentIndex: 0,
				last: 0,
				right_height: [], //右侧每个内容的高度集合
				select_index: 0,
				left_height: 0, //左侧总高度
				left_scroll: 0, //左侧滑动值
				catrgoryList: [],
				timeout: null,
				productList: [],
				leftList: [],
				item: [],
				way: '',

				loading: true,
				skeleton: [
					'line',
					'square+square-sm+line*2',
					'line',
					'square+square-sm+line*2',
					'line',
					'square+square-sm+line*2',
				], //骨架屏
			}
		},

		//分享
		onShareAppMessage(res) {
			let usId = uni.getStorageSync("usId")
			let route = this.$mp.page.route;
			this.share.path = route + `?&parentId=${uni.getStorageSync("usId")}&itemId=` + this.itemId + `&id=` + this.item
				.id
			this.share.imageUrl = ""
			return this.share
		},

		onShow() {
			if (this.$comm.checkNull(this.item.type) && this.item.type == 2) {
				//从土地详情回来的时候重置界面到我要摘
				this.item.type = 0
				this.check = 0
			}
			this.cleanList()
			this.getclassifyList()
			let token = uni.getStorageSync("token")
			if (this.$comm.checkNull(token)) {
				this.shorCarTotalAmount()
				this.haveCurrentPlot()
			}
		},
		onLoad(e) {
			if (this.$comm.checkNull(e.scene)) {
				const scene = decodeURIComponent(e.scene)
				let params = scene.split("&")
				let id = params[0].split("=")
				let type = params[1].split("=")
				console.log("scene: ", scene)
				console.log("id[1]: ", id[1])
				console.log("type[1]: ", type[1])
				e.id=id[1]
				e.type=type[1]
			}
			this.item = e
			if (!this.$comm.checkNull(e.type)) {
				e.type = 0
			}
			this.way = e.type
			this.windows_height = Number(uni.getSystemInfoSync().windowHeight);
			setTimeout(() => {
				this.getHeightList();
			}, 1000)
		},
		methods: {
			//判断是否显示海报
			haveCurrentPlot() {
				this.$axios({
					url: "user/plot/haveCurrentPlot",
					method: "post",
					data: {
						plotId: this.item.id
					}
				}).then((res) => {
					if (res.code == 0) {
						this.currentPlot = res.result
					}
				})
			},

			goChat() {
				let usId = uni.getStorageSync("usId")
				uni.navigateTo({
					url: "/pages/HM-chat/User-Chat?id=" + usId + "&sendid=" + this.merchantId +
						"&title=" + this.plotName +
						"&avatar=" + this.plotAvatar
				})
			},
			//最小值
			minCount(item) {
				let dian = item.carCount.match(/\./g)
				if (dian != null && dian.length >= 2) {
					item.carCount = 0.01
				}
				if (item.carCount <= 0) {
					item.carCount = 0.01
				}
			},
			//计算购物车总价格
			carPrice() {
				let price = 0.00;
				this.goods.forEach(item => {
					if (item.foods.length != 0) {
						console.log("item: ", item);
						item.foods.forEach(car => {
							if (car.carCount != 0) {

								price += car.carCount * car.price
							}
						})
					}
				})
				price = +(Number(price * 100) / 100).toFixed(2)
				return price;
			},
			goPay() {
				uni.navigateTo({
					url: "/pageA/shop/shopcart?id=" + this.item.id,
				})
				// uni.showToast({
				// 	title: "暂未开放，请点击果蔬图片进行单个购买",
				// 	icon: "none"
				// })
			},
			//获取购物车总价
			shorCarTotalAmount() {
				this.$axios({
					url: "user/usShopCar/shopCarTotalAmount",
					method: "post",
					data: {
						plotId: this.item.id
					}
				}).then((res) => {
					if (res.code == 0) {
						this.totalPrice = res.result.amount
						this.merchantId = res.result.merchantId
						this.plotName = res.result.plotName
						this.plotAvatar = res.result.plotAvatar
					}
				})
			},
			//计算总价
			calculatePrice(item, type) {
				console.log("this.totalPrice: ", this.totalPrice);
				if (type == 1) {
					this.totalPrice = this.totalPrice + (this.check == 0 ? item.price : item.growPrice)
				} else {
					if (this.totalPrice > 0.00) {
						this.totalPrice = this.totalPrice - (this.check == 0 ? item.price : item.growPrice)
					}
				}

				if (this.totalPrice > 0.00) {
					if (this.check == 0) {
						item.carCount = +(Number(item.carCount * 100) / 100).toFixed(2)
					}
					this.totalPrice = +(Number(this.totalPrice * 100) / 100).toFixed(2)
				}
			},
			//实时修改购物车数量
			changeCount(item) {
				let price = this.carPrice()
				this.totalPrice = "计算中..."
				setTimeout(() => {
					this.$axios({
						url: "user/usShopCar/changeCountVegetable",
						method: "post",
						data: {
							plotId: item.plotId,
							id: item.id,
							count: item.carCount
						}
					}).then((res) => {
						if (res.code == 0) {
							// this.totalPrice = this.carPrice()
							this.totalPrice = res.result
							this.totalPrice = +(Number(this.totalPrice * 100) / 100).toFixed(2)
						}
					})
				}, 500)
			},
			//购物车更改
			changeVegetable(item, type) {
				console.log("购物车按钮执行", this.btnDisabled);
				uni.showLoading({
					title: "提交中..."
				})
				this.$axios({
					url: "user/usShopCar/add",
					method: "post",
					data: {
						id: item.id,
						status: type,
						type: 3,
						merchantId: item.merchantId,
						specialType: this.check,
						plotId: item.plotId
					}
				}).then((res) => {
					if (res.code == 0) {
						uni.hideLoading()
						if (type == 1) {
							item.carCount++
						} else {
							if (item.carCount <= 0) {
								return;
							}
							item.carCount--
							if (item.carCount < 1) {
								item.carCount = 0
							}
						}
						this.$forceUpdate()
						this.totalPrice = res.result
						this.totalPrice = +(Number(this.totalPrice * 100) / 100).toFixed(2)
						item.carCount = +(Number(item.carCount * 100) / 100).toFixed(2)
					}
				})
			},
			//scrollView触底
			reachBottom() {
				if (this.status != 'noMore') {
					this.status = 'loading';
					this.ifBottomRefresh = true
					this.gethttplist();
				}
			},
			//跳转土地详情
			hint() {
				uni.navigateTo({
					url: `/pageA/growVegetables/localDetails?id=${this.item.id}`
				})
			},
			//选项卡改变
			sectionChange(index) {
				this.check = index
				this.item.type = this.check
				if (this.item.type == 3) {
					uni.navigateTo({
						url: "/merchant/qrCode?avatar=" + this.currentPlot.avatar + "&title=" + this.currentPlot
							.title + "&banner=" + this.currentPlot.banner + "&name=" + this.currentPlot.name +
							"&phone=" + this.currentPlot.phone + "&shareBanner=" + this.currentPlot.shareBanner
					})
					console.log("123123: ", this.currentPlot);
					return;
				}
				if (this.item.type == 2) {
					this.hint()
				} else {
					this.cleanList()
					this.getclassifyList()
				}
			},
			cleanList() {
				this.params = {
					pageNo: 1,
					pageSize: 10
				}
				this.status = "more"
				this.leftList = []
				this.goods = []
				this.productList = []
			},
			getclassifyList() {
				//分类请求
				this.$axios({
					url: "user/public/plot/categoryList",
					method: "post",
				}).then((res) => {
					res.result.forEach(item => {
						let obj = {
							"name": item.name,
							"foods": [],
							"id": item.id
						}
						this.leftList.push(obj)
					})
					this.gethttplist()
				})
			},
			gethttplist() {
				let token = uni.getStorageSync("token")
				let url;
				if (this.$comm.checkNull(token)) {
					url = "user/plot/productList"
				} else {
					url = "user/public/plot/productList"
				}
				//列表请求
				this.$axios({
					url: url,
					method: "post",
					data: {
						type: this.item.type,
						pageNo: this.params.pageNo,
						pageSize: this.params.pageSize,
						plotId: this.item.id
					}
				}).then((res) => {
					if (res.result.pages >= this.params.pageNo) {
						if (this.ifBottomRefresh) {
							this.productList = this.productList.concat(res.result.list)
							this.leftList.forEach(item => {
								res.result.list.forEach(productItem => {
									if (productItem.categoryId == item.id) {
										productItem.avatar = this.$reqConfig.URLIMAGE + productItem.avatar
										item.foods.push(productItem)
									}
								})
							})
						} else {
							this.productList = res.result.list
							this.leftList.forEach(item => {
								this.productList.forEach(productItem => {
									if (productItem.categoryId == item.id) {
										productItem.avatar = this.$reqConfig.URLIMAGE + productItem.avatar
										item.foods.push(productItem)
									}
								})
							})
						}
					} else {
						this.status = 'noMore'
					}
					if (this.params.pageNo >= res.result.pages) {
						this.status = 'noMore'
					}
					this.goods = this.leftList
					this.loading = false
					this.params.pageNo++;
				})
			},

			tzvegetablesDetails(item) {
				let url = `./vegetablesDetails?id=${item.id}`
				uni.navigateTo({
					url: url
				})
			},
			nearAddress() {
				uni.navigateTo({
					url: './shopcart'
				})
			},
			onClickItem(option) {
				this.current = option.currentIndex;
			},
			// 点击侧边栏
			select(index) {
				this.currentIndex = index;
				this.setScrollH(index);
			},
			// 设置点击侧边栏右边滚动的高度
			setScrollH: function(index) {
				var that = this;
				let height = 0;
				var query = uni.createSelectorQuery();
				let foods = query.selectAll('.foods');
				this.$nextTick(function() {
					foods.fields({
						size: true
					}, data => {
						if (index == 0) {
							that.foodSTop = 0;
						}
						for (let i = 0; i < index; i++) {
							height += parseInt(data[i].height);
							that.foodSTop = height;
						}

					}).exec();
				})

			},
			getHeightList() {
				let _this = this;
				let selectorQuery = uni.createSelectorQuery().in(this);
				selectorQuery.select('.left-content').boundingClientRect(function(rects) {
					_this.left_height = rects.height;
				});
				selectorQuery.selectAll('.foods').boundingClientRect(function(rects) {
					_this.right_height = rects.map((item) => item.top);
				}).exec();
			},
			myscroll(e) {
				//引入节流	
				let right_content_height = e.detail.scrollHeight - this.windows_height;
				if (right_content_height == e.detail.scrollTop) {
					return;
				}
				let scroll_top = e.detail.scrollTop + 110; //110是banner图的高度
				//判断当前的scrollTop在哪个区间内;
				let now = +new Date();
				if (now - this.last > 100) {
					this.last = now;
					let active_index = this.right_height.findIndex((value, index, arr) => value <= scroll_top &&
						scroll_top < arr[index + 1]);
					this.currentIndex = active_index;
					if (this.left_height - this.windows_height) { //!!!!!!!!!!!!!!!!!!
						//如果有超出部分
						let diff = this.left_height - this.windows_height
						this.left_scroll = Math.round((active_index * diff) / (this.goods.length - 1))
					}
				}
			}
		}
	}
</script>
<style lang="scss">
	.shorCarBox {
		display: flex;
		width: 100%;
		height: 135rpx;
		background-color: #fff;
		position: fixed;
		bottom: 0rpx;
		z-index: 999;

		.rightBox {
			display: flex;
			margin-left: auto;
			padding: 10rpx 36rpx;

			.price {
				line-height: 45rpx;
				font-size: 45rpx;
				padding: 28rpx 10rpx;
				color: #e80c0c;
			}

			.payBtn {
				padding: 10rpx;
				width: 170rpx;
			}
		}

		.imgBox {
			padding: 10rpx 50rpx;
		}
	}

	.current {
		position: relative;
		z-index: 0;
		background-color: #fff;
		font-weight: 900;
		color: #338ec3;
		border-left: 5px solid #6ebdea;
		background-color: #fff;
	}

	.selected {
		background-color: #70a1ff80;
		border: 5px solid;
		border-radius: 20%;
		border-color: #70a1ff80;
	}

	.selectedText {
		background-color: #70a1ffad;
		border-radius: 20rpx;
		color: #fff;
	}

	/deep/.u-subsection--button__bar.data-v-78c1286e {
		/* background-color: #395dff; */
		border-radius: 3px !important;
	}

	/deep/.u-subsection--button.data-v-78c1286e {
		background: linear-gradient(7deg, #6ed1ef, #92a8f9);
	}

	/deep/.u-subsection__item__text.data-v-78c1286e {
		font-weight: 900;
	}

	.listBox {
		width: 750rpx;
		/* height: 100vh; */
		margin-bottom: 15rpx;
		/* background-color: #fff; */
	}

	.contentListBox {
		display: flex;
		/* 		position: absolute; */
		width: 100%;
		height: 100vh;
		background-color: #fff;
	}

	.menu-wrapper {
		text-align: center;
		width: 22%;
		display: flex;
		flex-direction: column;
		background: #f3f5f7;
		background-color: #f5f7fb;

	}

	.menu-item {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 50px;
	}

	.allcount {
		position: absolute;
		right: 6px;
		top: 8px;
		display: inline-block;
		padding: 0 4px;
		font-size: 9px;
		line-height: 16px;
		font-weight: 400;
		border-radius: 50%;
		background-color: #f01414;
		color: #ffffff;
	}

	.allcount2 {
		position: absolute;
		right: 0px;
		top: 10px;
		display: inline-block;
		padding: 0 4px;
		font-size: 9px;
		line-height: 16px;
		font-weight: 400;
		border-radius: 50%;
		background-color: #f01414;
		color: #ffffff;
	}

	.foods-wrapper {
		margin-left: 15px;
		width: 78%;

	}

	.food,
	.food-btm,
	.content {
		display: flex;
		flex-direction: row;
	}

	.food-title {
		font-size: 27rpx;
		padding: 5px 0;
		font-weight: 600;
	}

	.food-info {
		margin-left: 10px;
		margin-right: 16px;
		display: flex;
		flex-direction: column;
		flex: 2;

		.addCar {
			width: 190rpx;
			height: 50rpx;
			background-color: #ffd900;
			border-radius: 30rpx;
			text-align: center;
			font-size: 28rpx;
			line-height: 47rpx;
		}

		.changeBtn {
			display: flex;
			width: 80rpx;
			justify-content: center;
		}
	}

	.food-btm {
		justify-content: space-between;

	}

	.food-price {
		color: #f01414;
		font-size: 16px;
	}
</style>
